
<template>
  <main>
    <!-- <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container> -->
    <el-container >
      <el-header class="box">
        <span class="khgl" >CRM</span>
        
        <el-menu
          default-active="/index/home"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="/index/home/xhz/users">
          <span class="iconfont icon-dasuozi"></span>
          权限管理
          </el-menu-item>
          <el-menu-item index="/index/home/xhz/users">
           <span class="iconfont icon-haoyou"></span>
          用户管理
          </el-menu-item>
          <el-menu-item index="/index/home/zqq/logs">
            <span class="iconfont icon-rizhi"></span>
          系统日志
          </el-menu-item>
             
          <el-menu-item class="zxrs" index="/index/home/zqq/logs">
          <span class="iconfont icon-haoyou"></span>
          在线人数
          </el-menu-item>
          <el-menu-item index="/index/home/zqq/logs">
           <span class="iconfont icon-xitongxiaoxi"></span>
          系统消息
          </el-menu-item>
          
          <el-menu-item index="/index/home/zqq/logs">
          <span class="iconfont icon-yonghu"></span>
          用户
          <span class="iconfont icon-zelvxuanzefeiyongdaosanjiaoxingfandui"></span>
          </el-menu-item>

        </el-menu>
     
      </el-header>
      <!-- 渲染一级路由出口 -->
      <router-view></router-view>
    </el-container>
  </main>
</template>

<script setup>
import { useRouter } from 'vue-router'
var router = useRouter()
//点击菜单项的回调, 通过参数path可以获取所点击的菜单项的index属性的值
var handleSelect = (path)=>{
  router.push(path);
}
</script>

<style scoped>
/* .box{
  width: 1400px;
} */
.el-header{
  display: flex;
  align-items: center;
  width: auto;

}

.el-header  .el-menu{
  width: 500px;
}
.el-menu-item{
  margin-left: 60px;
}
 .khgl {
  display: inline-block;
   font-size: 38PX;
   font-weight: bolder;
   color: red;
}
.el-header .el-menu[data-v-8901ba02] {
    width: 100%;
}
.zxrs {
  margin-left: 400px !important; 
}

/* .zxrs[data-v-8901ba02]{
    margin-left: 400px;
} */

.el-header {
  color: white;
  background:  rgba(27, 38, 55, 1);
}
.el-menu{
    color: white;
  background:  rgba(27, 38, 55, 1);
}
.el-menu-item{
  color: white;
}

/* .el-menu--horizontal>.el-menu-item span{
  font-size: 24px;
} */
/* .box span{
  display: inline-block;
  font-size: 22px;
  font-family:'Times New Roman', Times, serif;
  font-weight: bolder;
} */
.el-menu-item span{
  display: inline-block;
  font-size: 22px;
  font-family:'Times New Roman', Times, serif;
  font-weight: bolder;
}
body{
  width: 100%;
}
.box{
 width: 100%;
}

.zxrs {
  margin-left: 100px ; 
}
/* .el-menu--horizontal{
  width: 1300px;
} */
.el-header .el-menu[data-v-8901ba02] {
    width: 98%;
}
</style>